<template>
  <div>
    <p>请输入账号:{{ message }}</p>
    <!-- 这里的input是自定义事件  一旦组件内部调用input自定义事件 fn就会触发-->

    <My-Input :value="message" @input="message = $event"></My-Input>
    <!-- 
      刚才的案例在组件上使用了: value + @input
      而v-model的本质也是: value + @input
      所以可以在组件上使用v-model进行父子组件的数据双向绑定
     -->
    <My-Input v-model="message"></My-Input>
  </div>
</template>

<script>
import MyInput from "@/components/MyInput";
export default {
  name: "App",
  components: {
    MyInput,
  },
  data() {
    return {
      message: "张三",
    };
  },
  methods: {
    fn(value) {
      console.log("有数据传过来了", value);
      this.message = value;
    },
  },
};
</script>

<style>
</style>